<!DOCTYPE html>
<html>

<head>
    <title>电影大集合-详情页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/bootstrap.bundle.min.js"></script>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.6/purify.min.js"></script>
</head>

<body>

    <div class="container">
        <div class="row bg-dark">
            <p>影片详情页</p>
        </div>
        <!-- 详情内容
    <div class="row m-2 ">
        <div id="vod_pic" class="col-3">
            
        </div>
        <div id="neirong" class="col-9">

        </div>
    </div>
    -->
        <!-- 详情卡片-->
        <div class="card mb-3">
            <div class="row g-0">
                <div id="vod_pic" class="col-md-3">

                </div>
                <div class="col-md-9">
                    <div id="neirong" class="card-body">
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                            additional content. This content is a little bit longer.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
            </div>
        </div>
        <div id="xqcard" class="d-grid gap-2 d-md-block p-2 m-2"></div>
        <div class="row bg-dark">

        </div>
        <div id="list" class="row "></div>
    </div>
    <script>
        const lg = console.log
        var shoucang = JSON.parse(localStorage.getItem("shoucang")) || [];

        function 添加播放线路(from, urls) {
            if (from.includes("$$$")) {
                //多线路
                var fs = from.split("$$$")
                var us = urls.split("$$$")
                //lg(fs)
                fs.forEach((it, i) => {
                    //lg(it)
                    $("#list").append(`<p class="text-warning bg-dark"> 播放线路：${it} <div id="btns${i}" ></div>`)
                    var url = us[i].split("#")
                    url.forEach(it => {
                        let str = it.split("$")
                        $("#btns" + i).append(`<button type="button" onclick="播放视频('${str[1]}')" class="btn btn-outline-primary">${str[0]}</button>`)
                    });
                    $("#list").append(`<div class="m-2"> </div>`)
                })

            } else {
                //单线路
                $("#list").html(`<p>播放线路：${from} <div id="btns" ></div>`)
                var url = urls.split("#")
                url.forEach(it => {
                    let str = it.split("$")
                    $("#btns").append(`<button type="button" onclick="播放视频('${str[1]}')" class="btn btn-outline-primary">${str[0]}</button>`)
                });

            }

        }

        function 播放视频(url) {
            lg("播放视频:" + url)
            var $a = $('<a>', { href: url, target: '_blank' });
            $('body').append($a);
            $a[0].click();
            $a.remove();
        }
        function 已收藏(host, vid) {
            var has = shoucang.find(function (obj) {
                let i = obj.vod_id === vid
                let j = obj.host === host
                return i && j;
            }) !== undefined;
            return has
        }
        function 取消收藏(host, vid) {
            lg(shoucang)

            let ss = shoucang.filter(obj => {
                let i = obj.vod_id === vid
                let j = obj.host === host
                return !(i && j)
            });
            localStorage.setItem('shoucang', JSON.stringify(ss));

        }

        function 收藏影片(pic, name, host, vid) {
            var has = 已收藏(host, vid)
            if (!has) {
                let sc = { vod_pic: pic, vod_name: name, host: host, vod_id: vid }
                shoucang.push(sc);
                localStorage.setItem('shoucang', JSON.stringify(shoucang));
            }

        }
        function 显示界面(movie,host,vid) {
            $("#vod_pic").html(`<img class="img-fluid" src="${movie.vod_pic}" />`)
            $("#neirong").html(`<h5 class="card-title">电影名称： ${movie.vod_name}</h5>`)
            $("#neirong").append(`<p>出品国家： ${movie.vod_area} </p>`)
            $("#neirong").append(`<p>最后更新： ${movie.vod_remarks} </p>`)
            $("#neirong").append(`<p>内容简介： ${movie.vod_content} </p>`)
            $("#xqcard").append(`<button id="scbtn" class="btn btn-secondary" type="button">收藏本片</button>`)
            if (已收藏(host, vid)) {
                $("#xqcard").append(`<button id="qxbtn" class="btn btn-secondary" type="button">取消收藏</button>`)
            }

            添加播放线路(movie.vod_play_from, movie.vod_play_url)
            $("#scbtn").on('click', function () {
                收藏影片(movie.vod_pic, movie.vod_name, host, vid)
                $("#xqcard").append(`<button id="qxbtn" class="btn btn-secondary" type="button">取消收藏</button>`)
                lg(shoucang)
            });
            $("#qxbtn").on('click', function () {
                取消收藏(host, vid)
                $("#qxbtn").remove()
            });
        }
        //////////  程序开始  ///////////////

        $(document).ready(function () {
            const urlSearchParams = new URLSearchParams(window.location.search);
            const vid = urlSearchParams.get('vid');
            const host = urlSearchParams.get('host');
            var myurl = host + "?ac=videolist&ids=" + vid
            lg(myurl)
            var storage = window.localStorage;
            var json = storage.getItem("当前网站");
            lg(json)
            var jsonObj = JSON.parse(json);
            lg(jsonObj)
            $.get(myurl, function (data, status) {
                if (status !== "success") {
                    alert("网址访问失败！换个网站吧！")
                } else {
                    if (jsonObj.type === 'json') {
                        var classjson = JSON.parse(data)
                        var movie = classjson.list[0]
                        显示界面(movie,host,vid)
                    }
                    if (jsonObj.type === 'xml') {
                        data = data.replace(/<!\[CDATA\[/gi, '')
                        data = data.replace(/\]\]>/gi, '')
                        var movie = {}
                        movie.vod_pic = $(data).find('video>pic').text()
                        movie.vod_name = $(data).find('video>name').text()
                        movie.vod_area = $(data).find('video>type').text()
                        movie.vod_remarks = $(data).find('video>last').text()
                        movie.vod_content = $(data).find('video>des').text()
                        var play_from = $(data).find('dl>dd')
                        var froms = []
                        var urls = []
                        for (let i = 0; i < play_from.length; i++) {
                            froms.push($(play_from[i]).attr('flag'))
                            urls.push($(play_from[i]).text())
                        }
                        movie.vod_play_from = froms.join('$$$')
                        movie.vod_play_url = urls.join('$$$')
                        显示界面(movie,host,vid)
                    }

                }
            })
        });


    </script>
</body>

</html>